<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			border: 5px solid rebeccapurple;
			background-color: lightgray;
			padding: 40px;
			margin: 40px;
			width: 300px;
			height: 150px;
		}
		/*实际width= content + padding + border =  300 + 40×2 + 5×2 = 390px
		  实际高度height= 150 + 40×2 + 5×2 = 240px */

		.alternate {
			box-sizing: border-box;
			height: 240px;
			width: 390px;
			padding: 40px;
			margin: 40px;
			border: 5px solid rebeccapurple;
			background-color: lightgray;
		}
	</style>
</head>

<body>
	<div class="box">I use the standard box model.</div>
	<div class="alternate">I use the alternate box model.</div>
</body>

</html>